在HTML 添加以 data-
為前綴詞,後面看我們想要加甚麼的屬性,就完成dataset的設定
例如:
<div id="all" data-name="Lily" data-bbb="bb"></div>
這個'name' 也可以改成其他的字,例如'bbb'
取得某物件dataset的話就是物件名.dataset
, 如下:
let all = document.getElementById('all');
//dataset 特定屬性之取得
console.log(all.dataset.name); //Lily
//整個dataset資料的取得
console.log(all.dataset); //DOMStringMap {name: 'Lily', bbb: 'bb'}
下面可以覆寫原本的同屬性名的資料,如果沒有同屬性名稱就會新增資料
let all = document.getElementById('all');
//覆寫
all.dataset.name="jack";
console.log(all.dataset.name); //jack
//新增屬性
all.dataset.food="tomato";
console.log(all.dataset);//DOMStringMap {name: 'jack', bbb: 'bb', food: 'tomato'}